<template>
  <div>
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" center :title="title" width="30%">
      <el-form ref="form" :model="form" label-width="80px"
               style="display: flex;justify-content: center;align-items: center;flex-direction: column">
        <el-form-item
            v-for="(list, index) in [{ label: '安装人员', model: 'az', list: azList }, { label: '拣货人员', model: 'jh', list: jhList }, { label: '装车人员', model: 'zc', list: zcList }, { label: '卸货人员', model: 'xh', list: xhList }]"
            :key="index" :label="list.label">
          <el-select v-model="form[list.model]" multiple filterable>
            <el-option
                v-for="(item, i) in list.list"
                :label="item.userName"
                :value="item.userName"
                :key="i">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm" v-prevent-re-click> 确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogOpts" :close-on-click-modal="false" title="操作列表">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="安装列表" name="1">
          <el-table v-loading="loading" :data="azData" style="width: 100%" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',

          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="安装人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="拣货列表" name="2">
          <el-table :data="azData" border
                    max-height="300px"
                    v-loading="loading"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="拣货人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="装车列表" name="3">
          <el-table :data="azData" border
                    max-height="300px"
                    v-loading="loading"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="装车人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="卸货列表" name="4">
          <el-table :data="azData" border
                    max-height="300px"
                    v-loading="loading"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="卸货人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="售后列表" name="5">
          <el-button type="primary" style="float: right;margin-bottom: 5px" @click="addAfterSale">新增售后人员</el-button>

          <el-table :data="azData" border
                    max-height="300px"
                    v-loading="loading"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="售后人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column prop="afterSaleRemark" label="备注"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="mistakeDialog" width="30%" center title="取消提成">
      <div>请填写失误原因：</div>
      <el-input v-model="cancelReason" type="textarea" style="width: 400px"></el-input>
      <span slot="footer">
        <el-button @click="mistakeDialog=false">取 消</el-button>
        <el-button type="primary" @click="comfirmReason">确 认</el-button>
      </span>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="addAfterSaleDialog" width="30%" center title="新增售后人员">
      <div style="display: flex;flex-direction: column;align-items: center">
        <div>选择人员：
          <el-select v-model="sh" multiple filterable>
            <el-option
                v-for="(item, i) in list"
                :label="item.userName"
                :value="item.userName"
                :key="i">
            </el-option>
          </el-select>
        </div>

        <div style="margin-top: 20px">售后原因：
          <el-input type="textarea" style="width: 300px" placeholder="请输入售后原因" v-model="afterSaleRemark"></el-input>
        </div>
      </div>

      <span slot="footer">
        <el-button @click="addAfterSaleDialog=false">取 消</el-button>
        <el-button type="primary" @click="comfirmAfterSale">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "installOption",
  data() {
    return {
      dialogVisible: false,
      dialogOpts: false,
      mistakeDialog: false,
      addAfterSaleDialog: false,
      form: {
        az: [],
        jh: [],
        zc: [],
        xh: [],
      },
      title: "",
      azList: [],
      jhList: [],
      zcList: [],
      xhList: [],
      loading: false,
      apiName: 'orderInstallers',
      dialogWidth: "20vm",
      activeName: '1',
      azData: [],
      shData: [],
      list: [],
      cancelReason: "",
      afterSaleRemark: "",
      sh: [],
      orderId: "",
    }
  },
  mounted() {
    const loginTypes = [4, 4, 4, 4];
    const lists = ['azList', 'jhList', 'zcList', 'xhList'];
    Promise.all(loginTypes.map((loginType, index) =>
        this.$api.orderSelectInstallationUser({loginType})
            .then(res => {
              res.map(el => el.loginType = loginType)
              this[lists[index]] = res;
            })
    )).catch(error => {
      console.error('Error', error);
    });
  },
  methods: {
    handleOpen(val) {
      this.dialogVisible = true;
      this.row = val
      this.title = val.storeName
      this.form = this.$options.data.call(this).form
    },
    onConfirm() {
      let data = {
        "az": this.form.az.map(el => ({installers: el, type: 1, orderId: this.row.id, areaId: this.row.area})),
        "jh": this.form.jh.map(el => ({installers: el, type: 2, orderId: this.row.id, areaId: this.row.area})),
        "zc": this.form.zc.map(el => ({installers: el, type: 3, orderId: this.row.id, areaId: this.row.area})),
        "xh": this.form.xh.map(el => ({installers: el, type: 4, orderId: this.row.id, areaId: this.row.area})),
      };
      let mergedArray = [...data.az, ...data.zc, ...data.jh, ...data.xh,];
      for (let key in data) {
        if (Array.isArray(data[key]) && data[key].length === 0) {
          delete data[key];
        }
      }
      this.$api.orderAddInstaller(mergedArray).then(res => {
            if (res) {
              this.$message.success("添加成功！"),
                  this.dialogVisible = false
            }
          }
      )
    },
    //  操作详情
    getDetail(val) {
      this.dialogOpts = true;
      this.activeName = '1'
      this.row = val
      this.orderId = val.id
      this.$api.orderInstallers({type: this.activeName, orderId: val.id, pageSize: 100000, pageNumber: 1}).then(res => {
        this.azData = res.data
      })
    },
    comfirmAfterSale() {
      const data = this.sh.map(el => ({
        installers: el,
        type: 5,
        orderId: this.orderId,
        areaId: this.row.area,
        afterSaleRemark: this.afterSaleRemark
      }))
      this.$api.orderAddInstaller(data).then(res => {
            if (res == 1) {
              this.$message.success("添加成功！")
            }
          }
      )
      setTimeout(() => {
        this.$api.orderInstallers({type: 5, orderId: this.orderId, pageSize: 100000, pageNumber: 1}).then(res => {
          this.azData = res.data
        })
      }, 2000)
      this.addAfterSaleDialog = false
    },
    addAfterSale() {
      this.sh = []
      this.addAfterSaleDialog = true
      this.$api.orderSelectInstallationUser({loginType: 4})
          .then(res => {
            this.list = res
          })
    },
    handleClick(tab, event) {
      this.loading = true
      const number = parseInt(tab.index) + 1
      this.$api.orderInstallers({type: number, orderId: this.orderId, pageSize: 100000, pageNumber: 1}).then(res => {
        this.azData = res.data
        this.loading = false
      })
    },
    openMistake(row) {
      this.mistakeId = row.id
      this.mistakeDialog = true
      this.cancelReason = ""
    },
    comfirmReason() {
      const data = {
        id: this.mistakeId,
        cancelReason: this.cancelReason
      }
      this.$api.orderCancelCommission(data).then(res => {
        if (res == 1) {
          this.mistakeDialog = false
          this.$message.success("操作成功！")
          this.$api.orderInstallers({
            type: this.activeName,
            orderId: this.row.id,
            pageSize: 100000,
            pageNumber: 1
          }).then(res => {
            this.azData = res.data
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}
</style>